<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 帖子列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="handle-box">
                <el-select v-model="getPostData['schoolId']" placeholder="筛选学校" class="handle-select mr10">
                    <el-option v-for="school in schoolList" :key="school['Name']" :label="school['Name']" :value="school['SchoolId']"></el-option>
                </el-select>
                <el-select v-model="getPostData['categoryId']" placeholder="选择分类" class="handle-select mr10">
                    <el-option v-for="category in categoryList" :key="category['Name']" :label="category['Name']" :value="category['CategoryId']"></el-option>
                </el-select>
                <el-select v-model="getPostData['status']" placeholder="选择状态" class="handle-select mr10">
                    <el-option key="1" label="正常" value="1"></el-option>
                    <el-option key="2" label="待审核" value="2"></el-option>
                </el-select>
                <el-select v-model="getPostData['sort']" placeholder="排序" class="handle-select mr10">
                    <el-option key="1" label="ID升序" value="idAsc"></el-option>
                    <el-option key="2" label="ID倒序" value="idDesc"></el-option>
                    <el-option key="3" label="评论数升序" value="commentNumAsc"></el-option>
                    <el-option key="4" label="评论数倒序" value="commentNumDesc"></el-option>
                    <el-option key="5" label="点赞数升序" value="likeNumAsc"></el-option>
                    <el-option key="6" label="点赞数倒序" value="likeNumDesc"></el-option>
                </el-select>
                <el-input v-model="getPostData['nickname']" placeholder="输入用户昵称(模糊)" class="handle-input mr10"></el-input>
                <el-input v-model="getPostData['content']" placeholder="输入帖子内容(模糊)" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div> -->
            <el-table :data="reportList" border class="table" ref="multipleTable">
                <el-table-column prop="ReportId" label="ID" width="120" align="center">
                </el-table-column>
                <el-table-column label="用户头像" sortable width="150" align="center">
                    <template slot-scope="scope">
                        <img :src="scope.row.Avatar" alt="" srcset="" class="user-head">
                    </template>
                </el-table-column>
                <el-table-column prop="Nickname" label="用户昵称" width="120">
                </el-table-column>
                <el-table-column prop="Nickname" label="举报类型" width="120">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.type==1?"帖子":"评论"}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="Content" label="发帖内容" width="120">
                </el-table-column>
                <el-table-column label="图片/视频" align="center" width="300px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.Images" class="source-box"> 
                            <el-carousel height="150px">
                            <el-carousel-item v-for="item in scope.row.imgArr" :key="item">
                                <img :src="item" alt="" class="source">
                            </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div v-if="scope.row.Videos" class="source-box"> 
                            <video :src="scope.row['Videos']" class="source" controls></video>
                        </div>
                        <div v-if="!scope.row.Videos&&!scope.row.Images"> 
                            <h5>没有图片/视频</h5>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="Reason" label="举报原因">
                </el-table-column>
                <el-table-column label="举报状态">
                    <template slot-scope="scope">
                        <span>{{status[scope.row.IsMalice]}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope" v-if="scope.row.IsMalice==0">
                        <el-button type="text" class="red" icon="el-icon-circle-check" @click="handleEdit(scope.$index, 'Y')">同意举报</el-button>
                        <el-button type="text" icon="el-icon-circle-close" @click="handleEdit(scope.$index, 'N')">拒绝举报</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background :page-size="pageSize" @current-change="handleCurrentChange" layout="prev, pager, next" :total="postTotalCount">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import { getReportList, audit } from '../../api/report';
    // import { getSchoolList } from '../../api/school';
    // import { getCatogoryList } from '../../api/category';
    export default {
        name: 'basetable',
        data() {
            return {
                reportList:[],
                postList:[],
                categoryList:[],
                pageSize:0,
                postTotalCount:0,
                getPostData:{
                    Page:1,
                    PageSize:10   
                },
                status:{
                    0:"待审核",
                    1:"已同意",
                    2:"已拒绝"
                },
                itemList : ["恶意引战", "劣质广告", "日经贴, 重复太多", "拒绝黄赌毒", "包含政治敏感信息", "其他理由"]
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.getPostData.Page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                const that = this;
                getReportList(that.getPostData).then(res=>{
                    if(res.flag==1){
                        let result = res.data.Results;
                        let newData = result.map((r)=>{
                            let d = {};
                            d.Nickname = r.Nickname;
                            d.Avatar = r.Avatar;
                            d.reportUserId = r.UserId;
                            d.ReportId = r.ReportId;
                            d.type = r.Type;
                            d.Reason = this.itemList[r.Reason*1-1];
                            d.IsMalice = r.IsMalice;
                            if(r.Type==1){
                                d.Content = r.Post.Content;
                                d.imgArr = r.Post.Images.split(',');
                                d.Videos = r.Post.Videos;
                            }else{
                                d.Content = r.Comment.Content;
                                d.imgArr = [r.Comment.Image];
                                d.Videos = r.Comment.Video;
                            }
                            return d;
                        });
                        this.reportList = newData;
                        this.pageSize = res.data.PageSize;
                        this.postTotalCount = res.data.TotalCount;
                    }else{
                        this.$message({
                            message:res.msg,
                            type:"error"
                        });
                    };
                }).catch(err=>{
                    this.$message({
                        message:err.msg,
                        type:"error"
                    });
                });
            },
            /**
             * 搜索
             */
            search(){
                this.getData();
            },
            handleEdit(index, val) {
                const that = this;
                let isMalice = '';
                if(val=='Y'){
                    isMalice = 1;
                };
                if(val=='N'){
                    isMalice = 2;
                }
                const options = {
                    reportId:this.reportList[index].ReportId,
                    isMalice:val
                }
                const tipTitle = val == "Y"?"确认同意举报, 是否继续?":"确认拒绝举报, 是否继续?"
                this.$confirm(tipTitle, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        audit(options).then(res=>{
                            if(res.flag==1){
                                that.reportList[index].IsMalice = isMalice
                                that.$message({
                                    message:res.msg,
                                    type:"success",
                                    duration:500
                                });
                            }else{
                                that.$message.error(res.msg);
                            }
                            
                        },err=>{
                            that.$message.error(err.msg);
                        });
                    }).catch(() => {
                        that.$message({
                            type: 'info',
                            message: '已取消'
                        });          
                    });
            }
        }
    }

</script>

<style scoped>
    .el-carousel__button{
        width: 10px;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .source-box{
        width: 300px;
        height: 150px;
    }
    .source{
        margin:o auto;
        height: 100%;
    }
    .user-head{
        width: 60px;
        height: 60px;
    }
</style>
